<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <style>
      /*  body{
            background-color: rgba(60,63,65,0.41);
            color: white;
        }*/
        img{
            width: 50%;
        }

        .addPhoto>span:not(.uploadMaxTips){

            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;


        }
    /*    .uploadList{
            display:none;
        }*/
        .icon-jia{
            font-size: 30px;
            color: #cdd0dd;
        }
        .imgupYulan{
          margin: 20px;
        }
        .imgupYulan img{
            display: inline-block;
            margin-left: 10px;
            width: 100px;
            height: 100px;
            border: 1px solid rgba(255, 0, 0, 0.19);
        }
.showImgBox{
    width: 200px;
    height: 250px;
    padding: 10px;
    box-shadow: 10px 10px 20px rgba(83, 112, 255, 0.17);

    position: relative;
    float: left;
    background-color: white;
}
.showImgBox img{
    width: 100%;
    height: 100%;
    border-radius: 4px;

}
        .showImgBox span{
            position: absolute;
            background-color: rgba(255, 255, 255, 0.16);
            top:0px;
            right: 0px;
            border: none;
            font-size: 20px;
            color: rgb(156, 156, 156);
            font-weight: bold;
            cursor: pointer;
        }

        .turnPage{
            font-size: 0;
        }
        .turnPage a{
            display: inline-block;
            padding: 10px;
            font-size: 14px;
            float: left;
        }
        .clear::after{
    content: '';
    display: block;
    clear: both;
}
        .turnPage .pageList{
            display: inline-block;
            margin: 0;
            float: left;
        }
        .turnPage .pageList li{
margin: 10px;
            font-size: 14px;
            padding: 10px 20px;
            float: left;
            list-style: none;
            border-radius: 4px;
            box-shadow: 2px 10px 10px rgba(80, 109, 245, 0.23);

        }
.photoShowList>span:not(.ctrlTips){
    color: #9a9ca8;

}
.modal-dialog{
    color: black;
}
    </style>
</head>

<body>
<%- include('./header.ejs')%>

<h2>我的相册 (<span class="allPhoto">0</span>)</h2>
<form class="addPhoto" >
    <input type="file" multiple class="uploadInput" name="uploadList">

    <button type="button" >上传</button><span class="uploadMaxTips"></span>

</form>
<div class="imgupYulan"></div>
<div class="photoShowList clear">
</div>
<div class="turnPage clear" >
    <a onclick="prePage()">上一页</a>
    <ul class="pageList ">

    </ul>
    <a onclick="nextPage()">下一页</a>
</div>
<!--模态框把触发器的属性添加上实例的属性即可-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">操作提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            是否删除照片？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">手滑</button>
                <button type="button" class="btn btn-primary">确定删除</button>
            </div>
        </div>
    </div>
</div>
<script src="../../Jquery/jquery-1.11.3.js"></script>
<script src="../../bootstrap/js/bootstrap.js"></script>
<script>

 /*   console.log($('.test'))
    console.log($('.test')[2])*/
window.onload=function(){
    //渲染页面
    selectPhoto(nowPage,pageI)
}

//获取 用户上传的图片。每页12个，
let pageI=10,nowPage=1,turnPageState=true//是否需要更新页码
let maxPage
//后台获取当前用户的图片
function selectPhoto(nowPage,pageI) {

    new Promise(resolve => {
        $.ajax({
            method:'get',
            url:'/showPhoto',
            data:{nowPage,pageI},
            success(data){
                console.log(data)
               $('.allPhoto').text(`${data.dataCount}`)
                if (data.photoData!==400){
                    maxPage=data.pageData
                    showPhoto(data.photoData)
                    if (turnPageState){
                            showPageLi(data.pageData)
                      }
                }
               else {
                        console.log('photoShowList')
                   $('.photoShowList').append(`<span>暂无相册请先上传</span>`)
               }
            }
        })
    })
}
//渲染当前用户的相册图片
function showPhoto(data){
    $('.photoShowList').html(``)


        data.forEach(item=>{
            $('.photoShowList').append(`
                <div class="showImgBox">
                 <img class="showImgs" src="${item.p_imgArr}">
                     <span class="iconfont icon-shanchu btn btn-primary"  type="button"  data-toggle="modal" data-target="#exampleModal"></span>
                    </div>
               `)
        })

        $('.showImgBox').css({
            borderRadius:4,
            width: 200,
            height: 200,
            display: 'inline-block',
            margin: 30
        })
        $('.showImgBox:even').css({
            transform: 'rotate(5deg)'
        })
        $('.showImgBox:odd').css({

            transform: 'rotate(-2deg)'
        })

}
//渲染页码
function showPageLi(data){
    $('.pageList').html(``)
    for(let i=1;i<=data;i++){
        $('.pageList').append(`<li>${i}</li>`)
    }
    $('.pageList li').eq(nowPage-1).css({
        backgroundColor:'pink'
    })
    nowPageBgCorlor(nowPage)
}
//获取翻页页码，
$('.pageList').on('click','li',function (){
     nowPage=parseInt( $(this).text())

    selectPhoto(nowPage,pageI)

})
//翻页当前页背景色
function nowPageBgCorlor(nowPage){

    $('.pageList li').eq(nowPage-1).css({
        backgroundColor:'pink'
    }).siblings().css({
        backgroundColor:'white'
    })
}
//上一页
function prePage(){
    console.log('pre')
    if (nowPage>1) {
        nowPage--;
/*        turnPageState=false;*/
        selectPhoto(nowPage,pageI);}
}
//下一页
function nextPage(){
    console.log('next')
    if (nowPage<maxPage) {
        nowPage++;
      /*  turnPageState=false;*///是否需要每次刷新图片都重新获取页码？如果两端同时操作一个用户信息，删除增加等操作，
        selectPhoto(nowPage,pageI);}
}
//获取上传文件信息
    $('.uploadInput').change (function () {
        //获取上传文件
        console.log(this.files)
       //如何显示多张上传的图的预览。用对象来分别装名字和reader解析出来的base64
        //上传个数限制9
        $('.imgupYulan').html(``)
        $('.uploadMaxTips').text(``)
            let imgArr={data:[]}
            for (let i=0;i<this.files.length;i++){
                if (i===9){
                    $('.uploadMaxTips').text(`每次最多只能上传9个`).css({
                        color:'red'
                    })
                    break;
                }
                let uploadFileList=this.files[i]
                let reader=new FileReader()
                reader.readAsDataURL(uploadFileList)
                reader.onload=function () {
                    let uploadImgList=reader.result
                    let imgSrc={
                        name:uploadFileList.name,
                        data:uploadImgList
                    }
                    $('.imgupYulan').append(`<img  src=${uploadImgList}>`)
                    imgArr.data.push(imgSrc)
                    console.log(imgArr)
                    }

                }
            //自动截取9个并提示

    })
//上传
    $('.addPhoto button').click(function () {

        let data=new FormData($('.addPhoto')[0])

        if ($('.uploadInput').val()===''){ $('.uploadMaxTips').text('请先选择上传文件')}
        if ($('.uploadInput')[0].files.length<9){
            $.ajax({
                method:'post',
                url:'/filesUpload',
                data,
                contentType:false,
                processData:false,
                success(data){
                    console.log(data)
                    //渲染出该用户的所有图片。

                selectPhoto(nowPage,pageI)
                    //清空上传预览
                    $('.imgupYulan').html(``)
                    //重置上传输入框值。
                    $('.uploadInput').val(``)
        }
    })
        }
        else alert('每次最多只能上传9个，请重新选择上传文件')

    })
 let delImgSrc
$('.photoShowList').on('click','.icon-shanchu',function () {
    console.log($(this))
     delImgSrc=$(this).prev().attr('src')
 /*   $('.modal-body').text('是否删除图片？')*/
    //点击删除触发模态框点击
 /*   let e = document.createEvent("MouseEvents");
    e.addEventListener("click", true, true);
    document.getElementById("bsModelBtn").dispatchEvent(e); //只要id 就好*/

   /* shanchu(delImgSrc)*/

})
 $('.btn-primary').click(function () {
     shanchu(delImgSrc)
 })
            function shanchu(delImgSrc) {

                //请求后台删除数据，刷新页面，
                console.log(delImgSrc)
                new Promise(resolve => {
                    $.ajax({
                        method: 'post',
                        url: '/delImg',
                        data: {delImgSrc},
                        success(data) {
                            console.log(data)
                            if (data.code === 200) {
                                resolve(data.msg)
                            }
                        }

                    })
                }).then((msg) => {
                    //模态框关闭
                    $('#exampleModal').modal('hide')
                    selectPhoto(nowPage, pageI)
                })
            }




</script>
</body>
</html>